<template>
  <li class="cjy-page-body-commodity-li">
    <div>
      <div class="cjy-page-bod-commodity-box">
        <div class="cjy-page-image-box" @click="gotoDetail">
          <img :src="comInfor.mainPic" style="width: 100%" class="cjy-page-image-box-img" >
        </div>
        <div class="cjy-page-title-box">

          <span style="width: 100%">{{comInfor.goodsName || '\r'}} </span>
        </div>
        <div class="tagList">
          <p class="tag" v-if="comInfor.regularLabel">
            <span v-if="comInfor.regularLabel[0]">{{comInfor.regularLabel[0]}}</span>
            <span v-if="comInfor.regularLabel[1]">{{comInfor.regularLabel[1]}}</span>
          </p>
        </div>
        <div class="cjy-page-price-box">
          <del class="normalprice" v-if="comInfor.showNormalPrice && comInfor.showNormalPrice != comInfor.showWsPrice "
               style="color:#9A9A9A;font-size:.6rem;">
            ￥{{comInfor.showNormalPrice}}
          </del><br />
          ¥<span class="cjy-price">{{comInfor.showWsPrice}}</span>
          <span class="cjy-price-unit" v-if="comInfor.showUnit">/{{comInfor.showUnit}}</span>
        </div>


        <div>
          <update-cart
            :addCartButtonType="2.2"
            ref="updateCart"
            :commodityInfor="comInfor"
            :goodsId="goodsId">

            <!-- <div slot="button" slot-scope="props"
                 class="cjy-add-cart-button-box"
                 @click="cartButtonOnClick">
              <button-change-cart :type="2" fontSize="1.5rem" :style="buttonStyle"> 
              </button-change-cart>
            </div> -->

          </update-cart>
        </div>
      </div>
    </div>
  </li>
</template>

<script>
  import UpdateCart from '@/real-components/UpdateCart'
  import lazyLoad from 'vue-lazyload'
  import ButtonChangeCart from '@/real-components/ButtonChangeCart/icon'
  import {translatePrice} from '@/utils/TranslatePriceC/index.js'
  import {mapState, mapGetters} from 'vuex'
  import {queryProcessList} from '@/utils/ReturnAxios'
  export default {
    data() {
      return {
        goodsItem:'',
        goodsCode: "", //产品分类
        goodsId: "", //产品ID
        buttonStyle: {
          backgroundColor: '',
          color: '#EF5423'
        },
      }
    },
    components: {UpdateCart, ButtonChangeCart},
    props: {
      comInfor: {
        type: Object,
        default: () => ({}),
      },
    },
    methods: {

      // 获取加工信息列表
      async queryProcessList() {
        var goodsId = this.goodsId
        var processList = this.processListData[goodsId]

        // if (processList) {
        //   return processList
        // }
        var res = await
          queryProcessList(goodsId)
        res = res.data
        console.log('res ______', res)
        if (res.returnCode) {
          processList = res.data[0].processlist
        } else {
          processList = []
        }
        this.$store.commit('cjy/ADD_PROCESS_LIST_DATA', {[goodsId]: processList})
        return processList
      },

      // 加入购物车
      async addButton() {
        var processList = await
          this.queryProcessList()
        processList.length ? window.PSEvent.trigger('addCartForSpec', {
          commodityInfo: this.comInfor,
          processList
        }) : this.add()
      },

      //  直接加入购物车
      add() {
        var updateCart = this.$refs.updateCart
        updateCart && updateCart.addToCart()
      },

      translatePrice: translatePrice,
      goMore() {
        this.goMoreFn && this.goMoreFn()
      },
      changePrice(data) {
        return parseFloat(data).toFixed(2)
      },
      initData() {
        var comInfor = this.comInfor
        var lastStockCountNum = comInfor.lastStockCountNum || 0
        if (lastStockCountNum <= 0) {
          this.buttonStyle.color = 'gray'
        }
      },
      gotoDetail() {
        this.$router.push({
          path: 'detail',
          query: {
            code: this.comInfor.goodsCode
          }
        })
      },
      //  点击加入购物车 调用的事件
      cartButtonOnClick() {
        if (this.buttonActive) {
          this.buttonActive()
        } else {
          this.addButton()
        }
      }

    },
    computed: {
      ...mapState('cjy', ['processListData']),
    },
    watch: {
      comInfor(data) {
        console.log(data,'dataaaaaaa')
        this.comInfor = data
        this.initData()
      }
    },
    created() {
      this.initData()
    },
    mounted() {
    },
  }
</script>

<style scoped>
  .cjy-page-body-commodity-li {
    position: relative;
    float: left;
    width: 50%;
    margin-bottom: 0.5rem;
  }

  .cjy-page-body-commodity-li > div {
    width: 100%;
    padding: 0 0.35rem;
  }

  .cjy-page-bod-commodity-box {
    width: 100%;
    background: white;
    position: relative;
    border-radius: 5px;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .cjy-page-image-box {
    width: 100%;
    height: 0;
    position: relative;
    padding-bottom: 100%;
    overflow: hidden;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  .cjy-page-image-box-img{
  	border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

  .cjy-page-title-box, .cjy-page-lable-box, .cjy-page-price-box, .cjy-page-lable-box {
    padding: 0 0.7rem;
    text-align: left;
  }

  .cjy-page-title-box span {
    display: block;
    padding-top: 0.5rem;
    height: 1.2rem;
    color: #181818;
    /*font-weight: 600;*/
    font-size: 0.6rem;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    white-space: pre-wrap;
    white-space: nowrap;
  }

  .cjy-page-subtitle-box {
    color: greenyellow;
    font-weight: 600;
    font-size: 0.6rem;
    line-height: 0.9rem;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    white-space: normal;
  }

  .cjy-page-lable-box {
    height: 1rem;
  }

  .cjy-page-lable-box > .cjy-lable {
    display: inline-block;
    border-radius: 0.4rem;
    border: 1px solid red;
    font-size: 0.5rem;
    color: red;
    padding: 0px 0.2rem;
  }

  .cjy-page-price-box {
    position: relative;
    bottom: 0;
    width: 100%;
    margin-bottom: 0.4rem;
    font-size: 0.5rem;
    color: rgb(255, 115, 32);
    line-height: 0.7rem;
    height: 1.4rem;
  }

  .cjy-page-price-box > .cjy-price {
    font-size: 0.8rem;
    font-weight: 400;
  }

  .cjy-page-price-box > .cjy-price-unit {
    color: #777777;
  }

  .cjy-add-cart-button-box {
    height: 2rem;
    width: 2rem;
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
  }
  .tagList {
    height: 1rem;
    margin: 0.3rem 0.5rem;
    text-align: left
  }
  .tag {
    height: 1rem;
    font-size: 0.6rem;
    color: #ff2600;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
    display: flex;
  }
  .tag span {
    display: inline-block;
    color: red;
    border:1px solid red;
    border-radius: 3px;
    padding:0 3px;
    margin: 0 3px;
  }
</style>
